import React from 'react';
import { Collapse } from '@/molecules';
import { useCollapse } from '@/hooks';
import { Form, Typography } from 'antd';
import { DetailKPI, DetailAccessConfig, GuideDetail } from '../containers';
import { FormContent } from '../components';
import { TRIAL_ACTION } from '../constants';
import styles from './GuideLeader.less';

const { Panel } = Collapse;

function GuideLeader({ data = {} }) {
    const { activeKey, onChange } = useCollapse(['1', '2'], []);
    const { guide = [], employeeCode, performanceDate, abilityEvaluationName, teacherEqLeader } = data;
    const onlyLeader = teacherEqLeader === 1;
    const current = React.useMemo(() => guide.find(item => item.status === TRIAL_ACTION.GUIDE_LEADER) || {}, [data]);
    const detail = React.useMemo(() => {
        const hr = guide.find(item => item.status === TRIAL_ACTION.GUIDE_HR) || {};
        const teacher = guide.find(item => item.status === TRIAL_ACTION.GUIDE_TEACHER) || {};
        return { hr, teacher };
    }, [data]);
    const newEmployeeFlag = React.useMemo(() => {
        const currentUser = JSON.parse(localStorage.getItem('user') || null) ?? {};
        return currentUser?.employeeCode === employeeCode;
    }, [employeeCode]);

    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <Panel header="人事引导记录" key="1">
                    <div style={{ width: 800 }}>
                        <GuideDetail data={detail.hr} />
                    </div>
                </Panel>

                <Panel header="带教引导记录" key="2">
                    <div style={{ width: 800 }}>
                        <GuideDetail data={onlyLeader ? current : detail.teacher} />
                    </div>
                </Panel>

                <Panel header="本季度绩效目标" key="3">
                    <FormContent>
                        {newEmployeeFlag && (
                            <Typography.Paragraph>
                                {`部门主管为你制定了 ${performanceDate} 季度绩效目标，季度末将按此评估你的绩效表现。`}
                            </Typography.Paragraph>
                        )}
                        <DetailKPI data={current?.performance} />
                    </FormContent>
                </Panel>
                <Panel header="试用考评设置" key="4">
                    <FormContent>
                        <div className={styles.assessmentSheet}>
                            能力评估表：<span>{abilityEvaluationName}</span>
                        </div>
                        <Typography.Paragraph style={{ marginBottom: 20 }}>考评周期及内容：</Typography.Paragraph>
                        <DetailAccessConfig data={current?.evaluationSetting} />
                    </FormContent>
                </Panel>
            </Collapse>
        </div>
    );
}

export default Form.create({})(GuideLeader);
